import React from 'react'
import { View, StyleSheet, Text, ScrollView } from 'react-native'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import BasePage from 'src/pageP/base/base-page/index'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'
import JobIntentionCard from 'src/components/card-job-intention'
import NextButton from 'src/components/button/NextButton'
import ActionSheetModal from 'src/components/modal/ActionSheetModal'
import { updateJobStatus } from 'src/utils/RequestAPI'
import { CommonToast, DismissLoading, ShowLoading } from 'src/utils/ToastUtil'
/* redux */
import { connect } from 'react-redux'
import { UPDATE_MAIN_PAGE_C_ACTION } from '@/pageC/mine/mine-page/store/action'
import { jobStatusArr } from '../../../utils/ConfigUtil'

// 发送行为
const mapDispatchToProps = dispatch => ({
  updateMainPageC (payload) {
    dispatch(UPDATE_MAIN_PAGE_C_ACTION(payload))
  }
})

@connect(
  ({ userinfo, CMineCenterStore }) => ({
    userId: userinfo.C.userId,
    userArchiveModel: CMineCenterStore.userArchiveModel,
    jobHuntingModels: CMineCenterStore.jobHuntingModels
  }),
  mapDispatchToProps
)
class CManagerJobIntention extends BasePage {
  constructor (props) {
    super(props)
    const { userArchiveModel: { jobStatus } } = this.props
    let jobStatusLabel = '考虑机会'
    if (jobStatus) {
      const item = jobStatusArr.find(e => e.value == jobStatus)
      if (item) {
        jobStatusLabel = item.label
      }
    }
    this.state = {
      visible: false,
      jobStatusLabel,
      header: {}
    }
  }

  childRender () {
    const { jobHuntingModels } = this.props
    const { visible, jobStatusLabel } = this.state
    return (
      <View style={styles.container}>
        <ScrollView style={[styles.scrollView, jobHuntingModels.length < 3 && styles.scrollViewBottom]}>
          <Text style={styles.managerTitle}>管理求职意向</Text>
          <CustomButton style={styles.statusView} onPress={this.showSelect}>
            <Text style={styles.statusLabel}>求职状态</Text>
            <Text style={styles.statusVal}>{jobStatusLabel}</Text>
            <CustomImage
              style={styles.statusImg}
              source={require('@/imgC/userinfo/arrow_black_right.png')}
            />
          </CustomButton>
          <View style={styles.line}/>
          <Text style={styles.intentionTitle}>求职意向</Text>
          {jobHuntingModels.map((e, index) => (
            <CustomButton
              key={e.id}
              style={[styles.intentionCard, { marginBottom: index === jobHuntingModels.length - 1 ? ScaleS(90) : 0 }]}
              params={e}
              onPress={this.jobIntentionEditPress}>
              <JobIntentionCard dataSource={e}/>
            </CustomButton>
          ))}
        </ScrollView>
        {jobHuntingModels.length < 3 &&
        <NextButton style={styles.nextButton} title="添加求职意向" enable={true} onPress={this.jobIntentionAddPress}/>}
        <ActionSheetModal
          visible={visible}
          selectArr={jobStatusArr}
          onCancel={this.onCancel}
          selectClick={this.selectClick}
          onModalHide={this.onModalHide}
          titleText={'求职状态'}
        />
      </View>
    )
  }

  showSelect = () => {
    this.setState({
      visible: true
    })
  }

  onCancel = () => {
    this.setState({
      visible: false
    })
  }

  selectClick = () => {
    this.setState({
      visible: false
    })
  }

  onModalHide = index => {
    if (!index) {
      return
    }
    index = index - 1
    const { userId, userArchiveModel } = this.props
    const { id: archiveId } = userArchiveModel
    const params = {
      userId,
      archiveId,
      jobStatus: jobStatusArr[index].value
    }
    ShowLoading()
    updateJobStatus({ params }).then(() => {
      this.setState({
        visible: false,
        jobStatusLabel: jobStatusArr[index].label
      })
      this.props.updateMainPageC({
        userArchiveModel: {
          ...userArchiveModel,
          jobStatus: jobStatusArr[index].value
        }
      })
    }).finally(() => {
      DismissLoading()
    })
  }

  jobIntentionAddPress = () => {
    const callback = newJobIntention => {
      const { jobHuntingModels } = this.props
      this.props.updateMainPageC({
        jobHuntingModels: [...jobHuntingModels, newJobIntention]
      })
    }
    this.props.navigation.navigate('CUserJobIntentionEdit', {
      jobIntention: {},
      callback
    })
  }

  jobIntentionEditPress = (jobIntention) => {
    const callback = newJobIntention => {
      const { jobHuntingModels } = this.props
      if (newJobIntention) {
        this.props.updateMainPageC({
          jobHuntingModels: jobHuntingModels.map(f => f.id === newJobIntention.id ? newJobIntention : f)
        })
      } else {
        this.props.updateMainPageC({
          jobHuntingModels: jobHuntingModels.filter(f => f.id !== jobIntention.id)
        })
      }
    }
    this.props.navigation.navigate('CUserJobIntentionEdit', {
      jobIntention,
      callback
    })
  }
}

export default CManagerJobIntention

const styles = StyleSheet.create({
  container: {
    position: 'relative',
    flex: 1
  },
  scrollView: {
    flex: 1
  },
  scrollViewBottom: {
    marginBottom: ScaleS(105)
  },
  managerTitle: {
    color: '#444444',
    fontSize: ScaleT(27),
    fontWeight: '500',
    marginTop: ScaleS(30),
    marginLeft: ScaleS(20)
  },
  statusView: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: ScaleS(30),
    marginHorizontal: ScaleS(20)
  },
  statusLabel: {
    color: '#444444',
    fontSize: ScaleT(16),
    fontWeight: '600',
    flex: 1
  },
  statusVal: {
    color: '#333333',
    fontSize: ScaleT(16),
    fontWeight: '500',
    marginRight: ScaleS(16)
  },
  statusImg: {
    width: ScaleS(6),
    height: ScaleS(12)
  },
  line: {
    width: ScaleS(335),
    height: ScaleS(1),
    backgroundColor: '#EFEFEF',
    marginLeft: ScaleS(20)
  },
  intentionTitle: {
    color: '#444444',
    fontSize: ScaleT(16),
    lineHeight: ScaleT(36),
    fontWeight: '600',
    marginTop: ScaleS(35),
    marginLeft: ScaleS(20)
  },
  intentionCard: {
    marginLeft: ScaleS(20),
    marginTop: ScaleS(20)
  },
  nextButton: {
    position: 'absolute',
    bottom: ScaleS(20),
    left: ScaleS(32)
  }
})
